import React from 'react'
import {  Swiper, Toast } from 'antd-mobile'

import {Getbanner} from '../request/api'

import '../assets/css/mine.css'
export default class Mine extends React.Component{
    constructor(){
        super()
        this.state={list:[]}

    }
    tui(){
        Toast.show({
            content:'用户退出'
        })
        sessionStorage.removeItem('islogin')
        console.log('成功退出')
    }
    componentDidMount(){
        Getbanner().then(res=>{
            if(res.code==200){
                this.setState({list:res.list},
                    ()=>{
                        console.log(this.state.list,'轮播图')
                    })
            }
        })
    }
render(){
   
    
    const {list}=this.state
  return (
    <div className='mine'>
       <div id="page">
        {/* <!-- 头部 --> */}
        <header>
            {/* <!-- 顶部信息 --> */}
            <div className="top_box">
                {/* <!-- 左箭头图标 --> */}
                <span className="iconfont "></span>
                <h2>我的</h2>
                {/* <!-- 更多图标 --> */}
                <div className="more">
                    {/* <!-- ...图标 --> */}
                    <span className="iconfont icon-gengduo">
                    </span>
                    {/* <!-- 竖线 --> */}
                    <div className="line"></div>
                    {/* <!-- 小圆圈 --> */}
                    <span className="iconfont icon-xiaoyuandian"></span>
                </div>
            </div>
        </header>
        {/* <!-- 头头 --> */}
        <div className="boxxx2 ">
            <div className="he">
                <div className="q fl"></div>
                <p className="w33 fl">代用名  <span>完善资料让小u更懂你</span></p>
                <div className="e fr"><img src={require("../assets/images/红包.png")} alt=""/>每日签到</div>
            </div>
            <div className="r">
                <div><p>12</p><span>我的收藏</span></div>
                <div><p>12 </p><span>阅览记录</span></div>
                <div><p>&yen;0 </p> <span>我的红包</span></div>
                <div><p>12 </p> <span>优惠券</span></div>

            </div>
            {/* <!-- 订单 --> */}
            <div className="y">
                <p><strong>我的订单</strong><span><a href="#">全部订单</a> </span></p>
            </div>
           
            {/* <!-- 付款 --> */}
            <div className="t">
                <div> <a href="#"><img src={require("../assets/images/1.png")} alt=""/>
                        <p>待付款</p>
                    </a> </div>
                <div><a href="#"> <img src={require("../assets/images/2.png")} alt=""/>
                        <p>待收货</p>
                    </a> </div>
                <div><a href="#"> <img src={require("../assets/images/3.png")} alt=""/>
                        <p>评价</p>
                    </a> </div>
                <div><a href="#"> <img src={require("../assets/images/4.png")} alt=""/>
                        <p>售后/退款</p>
                    </a> </div>
            </div>
        </div> 
        {/* 轮播图 */}
          
    <div className='lllll'>
        <Swiper autoplay loop autoplayInterval={2000}>
            {
                list.map(item=>(
                    <Swiper.Item key={item.id}>
                        <img src={item.img} alt="" />

                    </Swiper.Item>
                ))
            }
        </Swiper>
</div>
        <ul>
            <li>
                <img src={require("../assets/images/address.png")} alt=""/>
                <p>地址管理</p> 
            </li>
            <li>
                <img src={require("../assets/images/wallet.png")} alt=""/>
               <p> 我的钱包</p>
            </li>
            <li>
                <img src={require("../assets/images/QR_code.png")} alt=""/>
               <p> 我的二维码</p>
            </li>
            <li>
                <img src={require("../assets/images/partner.png")} alt=""/>
                <p>我的小伙伴</p> 
            </li>
            <li>
                <img src={require("../assets/images/free.png")} alt=""/>
               <p>0元试用</p> 
            </li>
        </ul>
       
        <div className="kong">
            <button onClick={this.tui.bind(this)}>退出登录</button>
        </div>
  
    </div>
    </div>
  )}
}
